<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="../cwjy/css/app.css" rel="stylesheet">
    <style>
        html::-webkit-scrollbar {
            display: none
        }
    </style>
</head>
<script src="../cwjy/js/app.js"></script>
<script src="../cwjy/js/jquery.min.js"></script>
<body>
<div class="card">
    <div class="card-header">
        <div>
            <div style="float:left;">
                <span style="font-weight: bold;font-size: 20px;text-shadow: 1px 1px 2px #000000;">收货地址</span>
            </div>
            <div style="float: right;margin-right: 7%">
                <button type="button" class=" " data-feather="plus-circle" data-toggle="modal"
                        data-target="#defaultModalPrimary" onclick="addInit()"></button>
            </div>
        </div>
        <table class="table table-striped" cellpadding="0" cellspacing="0">
            <thead>
            <tr>
                <th style="width:13%;">序号</th>
                <th style="width:18%;">收货人姓名</th>
                <th style="width:20%">电话</th>
                <th style="width:24%">收货地址</th>
                <th style="width:15%">邮政编码</th>
                <th>Actions</th>
            </tr>
            </thead>
            <tbody id="tbodyDiv">

            </tbody>
        </table>
    </div>
</div>

<!--模态框-->

<div class="modal fade" id="defaultModalPrimary" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header" id="modelHead">
                <h3 class="modal-title" id="modelHeadText" style="font-weight: bold;text-shadow: 1px 1px 3px #000000;">
                    收货地址增加</h3>
            </div>
            <div class="modal-body m-3">
                <div class="card-body" id="modelDiv"
                     style="font-weight: bold;font-size: 15px;text-shadow: 2px 2px 2px #cccccc;">
                    <div class="mb-3 row">
                        <label class="col-form-label col-sm-2 text-sm-right">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="receiver_name" placeholder="姓名">
                        </div>
                    </div>

                    <div class="mb-3 row">
                        <label class="col-form-label col-sm-2 text-sm-right">电话</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="receiver_phone" inputmode="phoneCheck()" placeholder="电话">
                        </div>
                    </div>


                    <div class="mb-3 row"   id="distpickerDemo"  data-toggle="distpicker">
                        <label class="col-form-label col-sm-1 text-sm-right">省</label>
                        <div class="col-sm-3">
                            <select class="form-control" id="receiver_state">
                            </select>
                        </div>
                        <label class="col-form-label col-sm-1 text-sm-right">市</label>
                        <div class="col-sm-3">
                            <select class="form-control" id="receiver_city">
                            </select>
                        </div>
                        <label class="col-form-label col-sm-1 text-sm-right">县</label>
                        <div class="col-sm-3">
                            <select class="form-control" id="receiver_district">
                            </select>
                        </div>
                    </div>

                    <div class="mb-3 row">
                        <label class="col-form-label col-sm-2 text-sm-right">详细地址</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="receiver_address" placeholder="详细地址">
                        </div>
                    </div>

                    <div class="mb-3 row">
                        <label class="col-form-label col-sm-2 text-sm-right">邮政编码</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control"  id="receiver_zip" placeholder="邮政编码">
                        </div>
                    </div>

                </div>
            </div>
            <div class="modal-footer" id="modelAction">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                <button type="button" class="btn btn-primary" id="submitAddOrUpdate"  onclick="addShipping()">保存</button>
            </div>
        </div>
    </div>
</div>
<script src="../cwjy/js/distpicker.data.js"></script>
<script src="../cwjy/js/distpicker.js"></script>
<script src="../cwjy/js/main.js"></script>
<script type="text/javascript" src="../cwjy/js/ajaxAll.js"></script>
<script type="text/javascript">

    let shippingData;

    function addShipping() {
        let receiver_name = $('#receiver_name').val();
        let receiver_phone = $('#receiver_phone').val();
        let receiver_state = $('#receiver_state').val();
        let receiver_city = $('#receiver_city').val();
        let receiver_district = $('#receiver_district').val();
        let receiver_address = $('#receiver_address').val();
        let receiver_zip = $('#receiver_zip').val();
        if(!isPhoneNo()){
            alert("手机号码不正确")
            return;
        }
        let json = {
            "receiver_name": receiver_name, "receiver_phone": receiver_phone, "receiver_state": receiver_state,
            "receiver_city": receiver_city, "receiver_district": receiver_district, "receiver_address": receiver_address
            , "receiver_zip": receiver_zip
        }

        $.ajax({
            type: 'post',
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: 'http://localhost:8888/cwjy/OrderShipping/insert',    //请求发送到Servlet
            contentType: 'application/json;charset=UTF-8',//指定消息请求类型
            data: JSON.stringify(json),
            timeout: 10000,    //超时10s
            success: function (res) { returnLogin(res);
                /**生出成功刷新页面*/
                if (parseInt(res.data) > 0) {
                    alert('增加成功')
                    window.location.reload();
                } else {
                    alert('增加失败')
                }
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert('数据请求失败!');
            }
        });
    }


    function getAddress() {
        $.ajax({
            type: 'post',
            async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
            url: 'http://localhost:8888/cwjy/OrderShipping/getPage',    //请求发送到Servlet
            contentType: 'application/json;charset=UTF-8',//指定消息请求类型
            data: JSON.stringify({}),
            timeout: 10000,    //超时10s
            success: function (res) { returnLogin(res);
                shippingData = res.data;
                forEachAddress(res.data)
            },
            error: function (errorMsg) {
                //请求失败时执行该函数
                alert('数据请求失败!');
            }
        });
    }


    function forEachAddress(data) {
        let address = "";
        for (let i = 0; i < data.length; i++) {
            let temp = " <tr>\n" +
                "                <td>" + (i + 1) + "</td>\n" +
                "                <td>" + data[i].receiver_name + "</td>\n" +
                "                <td>" + data[i].receiver_phone + "</td>\n" +
                "                <td>" + data[i].receiver_state + data[i].receiver_city + data[i].receiver_district + data[i].receiver_address + "</td>\n" +
                "                <td class=\"d-none d-md-table-cell\">" + data[i].receiver_zip + "</td>\n" +
                "                <td class=\"table-action\">\n" +
                "                    <a href=\"#\" onclick='seeDataById(\""+data[i].id+"\")'><i class=\"align-middle\" data-feather=\"eye\" data-toggle=\"modal\"\n" +
                "                                   data-target=\"#defaultModalPrimary\" ></i></a>\n" +
                "                    <a href=\"#\" onclick='updateDataById(\""+data[i].id+"\")'><i class=\"align-middle\" data-feather=\"edit-2\" data-toggle=\"modal\"\n" +
                "                                   data-target=\"#defaultModalPrimary\"></i></a>\n" +
                "                    <a href=\"#\" onclick='deleteDataById(\""+data[i].id+"\")'><i class=\"align-middle\" data-feather=\"trash\"></i></a>\n" +
                "                </td>\n" +
                "            </tr>"
            address += temp;
        }
        $('#tbodyDiv').html(address)
        feather.replace();
    }

    getAddress();

    function seeDataById(id) {
        dataReturnTable(id)
        $('#modelDiv input').each(function () {
            $(this).attr("disabled","disabled")
        })
        $('#modelDiv select').each(function () {
            $(this).attr("disabled","disabled")
        })
        $('#submitAddOrUpdate').css("display","none");
    }

    function dataReturnTable(id){
        let data;
        for (let i = 0; i < shippingData.length; i++) {
            if (id === shippingData[i].id) {
                data = shippingData[i];
                break;
            }
        }
        $('#receiver_name').val(data.receiver_name);
        $('#receiver_phone').val(data.receiver_phone);
        $('#receiver_address').val(data.receiver_address);
        $('#receiver_zip').val(data.receiver_zip);
        var $distpickerz = $('#distpickerDemo');
        $distpickerz.distpicker('destroy');
        $distpickerz.distpicker({
            province: data.receiver_state,
            city: data.receiver_city,
            district: data.receiver_district
        });
    }

        // 验证手机号
        function isPhoneNo() {
            let value = $("#receiver_phone").val();
            var pattern = /^1[34578]\d{9}$/;
            return pattern.test(value);
        }


    function updateDataByIdAjax(id){
        let receiver_name = $('#receiver_name').val();
        let receiver_phone = $('#receiver_phone').val();
        let receiver_state = $('#receiver_state').val();
        let receiver_city = $('#receiver_city').val();
        let receiver_district = $('#receiver_district').val();
        let receiver_address = $('#receiver_address').val();
        let receiver_zip = $('#receiver_zip').val();
        if(isPhoneNo()){
            alert("手机号码不正确")
            return;
        }
        let json = {
            "receiver_name": receiver_name, "receiver_phone": receiver_phone, "receiver_state": receiver_state,
            "receiver_city": receiver_city, "receiver_district": receiver_district, "receiver_address": receiver_address
            , "receiver_zip": receiver_zip, "id":id
        }
        if (confirm('是否确认修改?')) {
            $.ajax({
                type: 'post',
                async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url: 'http://localhost:8888/cwjy/OrderShipping/updateByPrimaryKeySelective',    //请求发送到Servlet
                contentType: 'application/json;charset=UTF-8',//指定消息请求类型
                data: JSON.stringify(json),
                timeout: 10000,    //超时10s
                success: function (res) { returnLogin(res);
                    if(parseInt(res.data) > 0){
                        alert('修改成功！')
                        window.location.reload();
                    }else {
                        alert("修改失败")
                    }
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert('数据请求失败!');
                }
            });
        }
    }

    function updateDataById(id) {
        dataReturnTable(id);
        $('#modelDiv input').each(function () {
            $(this).removeAttr("disabled","disabled")
        })
        $('#modelDiv select').each(function () {
            $(this).removeAttr("disabled","disabled")
        })
        $('#submitAddOrUpdate').css("display","block");
        $('#submitAddOrUpdate').attr("onclick","updateDataByIdAjax('"+id+"')");

    }

    function addInit(){
        $('#modelDiv input').each(function () {
            $(this).removeAttr("disabled","disabled")
            $(this).val("")
        })
        $('#modelDiv select').each(function () {
            $(this).removeAttr("disabled","disabled")
            $(this).val("")
        })
        $('#submitAddOrUpdate').css("display","block");
        $('#submitAddOrUpdate').attr("onclick","addShipping()");
    }

    function deleteDataById(id) {
        if (confirm('是否删除该地址?')) {
            $.ajax({
                type: 'post',
                async: true,            //异步请求（同步请求将会锁住浏览器，用户其他操作必须等待请求完成才可以执行）
                url: 'http://localhost:8888/cwjy/OrderShipping/deleteByPrimaryKey',    //请求发送到Servlet
                contentType: 'application/json;charset=UTF-8',//指定消息请求类型
                data: JSON.stringify({"id": id}),
                timeout: 10000,    //超时10s
                success: function (res) { returnLogin(res);
                   if(parseInt(res.data) > 0){
                       alert('删除成功！')
                       window.location.reload();
                   }else {
                       alert("删除失败")
                   }
                },
                error: function (errorMsg) {
                    //请求失败时执行该函数
                    alert('数据请求失败!');
                }
            });
        }
    }


</script>

</body>
</html>